 <template>
  <div>
    <div class="background">
      <img class="back" src="../assets/img/back.jpeg">
    </div>
    <button id="toBack" @click="toUserAllAddress">返回地址列表</button>
    <div class="body">
      <form>
        <label for="name">收件人姓名</label>
        <br>
        <input type="text" id="name" v-model="name">
        <label for="phone" >收件人手机号<span style="font-size: 10px;color: red" v-show="checkPhone">  X</span></label>
        <br>
        <input type="text" id="phone" @blur="blurPhone(phone)"v-model="phone">
        <label for="address">收件地址</label>
        <br>
        <input type="text" id="address" v-model="address">
        <input type="submit" class="notarize" value="保存" @click="save">
      </form>
    </div>
  </div>
</template>

<script >
  import {editAddress, addAddress} from '@/api/user'

  export default {
    name: 'ChangeAddress',
    data () {
      return {
        name: '',
        phone: '',
        address: '',
        checkPhone: false,
      }
    },
    created () {
      var data = this.$route.query.address
      //如果data有数据，说明是用户点击修改按钮跳转过来的，将输入框中信息补全
      if (data != null) {
        this.name = data.rname
        this.phone = data.rphone
        this.address = data.raddress
        //如果data无数据，说明是用户点击新增按钮跳转过来的，将输入框中数据置为空
      } else {
        this.name = ''
        this.phone = ''
        this.address = ''
      }
    },
    methods: {
      //保存方法
      save () {
        if (this.phone===''&&this.address==='' &&this.name===''){
          this.$message.error("请补全信息");
          return;
        }
        //如果路由携带的address不为空，则是修改
        if (this.$route.query.address != null) {
          editAddress({
            aid: this.$route.query.address.aid,
            phone: this.phone,
            address: this.address,
            name: this.name,
          }).then((res) => {
            if (res.data.data) {
              this.$message.success("修改成功")
              this.$router.replace('/UserAllAddress')
            } else {
              this.$message.success('修改失败')
            }
          }).catch((reason => {
              alert('出错了，请重试')
            })
          )
          //uid为空，则是新增
        } else {
          addAddress({
            uid: this.$store.state.user.uid,
            rname: this.name,
            rphone: this.phone,
            raddress: this.address,
          }).then((res) => {
            if (res.data) {
              this.$message("地址添加成功")
              this.$router.replace('/UserAllAddress')
            } else {
              this.$message.success('地址添加失败')
            }
          }).catch((con) => {
            alert('出错了，请重试')
          })
        }
      },
      //去用户地址列表
      toUserAllAddress () {
        this.$router.replace('/UserAllAddress')
      },
      //判断手机号的长度
      blurPhone(phone){
        if (phone.length!==11){
          this.checkPhone=true
          this.$message.error("请输入正确的手机号")
        }else {
          this.checkPhone=false
        }
      }
    }
  }
</script>

<style scoped>
  #toBack {
    float: left;
    background-color: #9acfea;
    border-radius: 10px;
    opacity: 0.8; /*背景透明度*/
  }

  .background {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
  }

  .back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .body{
    z-index:-1;
    position: absolute;
    top: 100px;
    left: 20px;
  }

  input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid rgb(248, 243, 243);
    outline: none;
  }

  input[type=text]:focus {
    background-color: lightblue;
  }
  .notarize{
    background-color:rgb(89, 204, 219) ;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    top: 300px;
    left: 85px;

  }


</style>
